import { PureComponent } from 'react';
import {
  Scene, OrthographicCamera, BoxGeometry, MeshPhongMaterial,
  Mesh, WebGLRenderer, PointLight, SphereGeometry
} from 'three';

class Index extends PureComponent {

  componentDidMount() {
    const scene = new Scene();

    const camera = new OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
    camera.position.set(25, 25, 25);
    camera.lookAt(0, 0, 0);

    const geometry = new SphereGeometry(3, 20, 8);
    // const geometry = new BoxGeometry(5, 5, 5);

    const material = new MeshPhongMaterial({
      color: 0xff0000,
      specular: 0xffff00,
      shininess: 100
    });

    const mesh = new Mesh(geometry, material);
    scene.add(mesh);

    const light = new PointLight(0xffffff, 1, 200);
    light.position.set(10, 15, 25);
    scene.add(light);

    const canvas = document.getElementById('mainCanvas');

    const renderer = new WebGLRenderer({
      canvas
    });
    renderer.render(scene, camera);

  }

  render() {

    return (
      <canvas
        id="mainCanvas"
        width="400"
        height="300"
      />
    );
  }
}

export default Index;